<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>在线支付</p>
        </header>
        <!-- 订单信息部分 -->
        <h3>订单信息：</h3>
        <div class="order-info">
            <p>
                {{ orders.business.businessName }}
                <i class="fa fa-caret-down" id="showBtn" @click="detailetShow"></i>        <!--点击小三角显示点餐明细，感觉没什么用-->
            </p>
            <p>&#165;{{ orders.orderTotal }}</p>
        </div>

        <!-- 订单明细部分 -->
        <ul class="order-detailet" id="detailetBox" v-show="!isShowDetailet">
            <li v-for="item in orders.list">
                <p>{{item.food.foodName}} x {{item.quantity}}</p>
                <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
            </li>
            <li>
                <p>配送费</p>
                <p>￥{{ orders.business.deliveryPrice }}</p>
            </li>
        </ul>

        

        <!-- 支付方式部分 -->
        <ul class="payment-type">
            <li>
                <img src="../assets/alipay.png">
                <input type="radio" name="pay_way"></input>
            </li>
            <li>
                <img src="../assets/wechat.png">
                <input type="radio" name="pay_way"></input>
            </li>
        </ul>
        <div class="payment-button">
            <button @click="toIndex">确认支付</button>
        </div>
        <Footer></Footer>
    </div>
    
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
    name: 'Payment',
    data() {
        return {
            orderId: this.$route.query.orderId,
            orders: {
                business: {}
            },
            isShowDetailet: false
        }
    },
    created() {
        this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
            orderId: this.orderId
        })).then(response => {
            this.orders = response.data;
        }).catch(error => {
            console.error(error);
        });
    },
    mounted() {
        //这里的代码是实现：一旦路由到在线支付组件，就不能回到订单确认组件。
        //先将当前url添加到history对象中
        history.pushState(null, null, document.URL);                    //防止订单丢失，其实是下下策吧，真要做要参考真正的点餐取消订单
        //popstate事件能够监听history对象的变化
        window.onpopstate = () => {
            this.$router.push({ path: '/index' });
        }
    },
    destroyed() {
        window.onpopstate = null;
    },
    methods: {
        detailetShow() {
            this.isShowDetailet = !this.isShowDetailet;
        },
        toIndex(){
            alert('支付成功');
            this.$router.push({ path: '/index', query: {} });
        }
    },
    components: {
        Footer
    }
}

</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper h3 {
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw 4vw 0;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
}

.wrapper .order-info {
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .order-info p:last-child {
    color: orangered;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailet {
    width: 100%;
}

.wrapper .order-detailet li {
    width: 100%;
    box-sizing: border-box;
    padding: 1vw 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .order-detailet li p {
    font-size: 3vw;
    color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type {
    width: 100%;
}

.wrapper .payment-type li {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .payment-type li img {
    width: 36vw;
    height: 8.9vw;
}

.wrapper .payment-type li .fa-check-circle {
    font-size: 5vw;
    color: #38CA73;
}

.wrapper .payment-button {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
}

.wrapper .payment-button button {
    width: 100%;
    height: 10vw;
    border: none;
    /*去掉外轮廓线*/
    outline: none;
    border-radius: 4px;
    background-color: #38CA73;
    color: #fff;
}

/****************** 底部菜单部分 ******************/
.wrapper .footer {
    width: 100%;
    height: 14vw;
    border-top: solid 1px #DDD;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.wrapper .footer li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
    user-select: none;
    cursor: pointer;
}

.wrapper .footer li p {
    font-size: 2.8vw;
}

.wrapper .footer li i {
    font-size: 5vw;
}
</style>